<template>
    <div class="content" v-loading="loading">
        <el-dialog :visible.sync="modifyTeacher.dialogFormVisible" 
        title="修改班级名称" size="tiny" :before-close="handleClose" > 
            <div v-loading = "upLoaing">
              <section>
                <el-form :model="modifyTeacher" ref="modifyTeacher" :rules="validRule" label-width="80px" @submit.native.prevent>
                    <el-form-item label="修改名称" prop="className">
                      <el-popover placement="top-start" trigger="focus" content="请输入小于10位的名称">
                        <el-input slot="reference" :maxlength="10" v-model="modifyTeacher.className" placeholder="请输入修改班级名称"></el-input>
                      </el-popover>
                    </el-form-item>
                </el-form>
            </section>
            <footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button @click="add('modifyTeacher')" type="primary">确认</el-button>
            </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { changeClassName } from "api/classAll";
export default {
  name:"modifyClassName",
  props: {
    modifyTeacher: {}
  },
  created() {
    this.oldClassName=this.modifyTeacher.className;//修改前的班级名称（这里记录一下，为了提交时检查是否修改）
  },
  data() {
    var nameValidate = (rule, value, callback) =>{
        let va = /[@#\$%\^&\*]+/g;
        if (va.test(value)) {
          callback(new Error('请勿输入特殊字符'));
        }
        callback();
    }
    return {
      upLoaing:false,
      oldClassName:'',//修改前的班级名称
      loading:false,
      validRule:{
        className: [
          { required: true, message: "请输入修改名称", trigger: "blur" },
          { min: 0, max: 10, message: "请输入10个汉字以内的班级名", trigger: "blur" },
          { validator: nameValidate, trigger: 'blur'},
          { pattern: /^[^\s]+$/, message: '请勿输入空格', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    handleClose() {
      this.modifyTeacher.dialogFormVisible = false;
    },
    add(val) {
      this.$refs[val].validate(valid => {
        if (valid) {
          if(this.modifyTeacher.className == this.oldClassName.trim()){
            this.$message('您没有修改任何信息');
            return false
          }else{
              this.upLoaing = true;
              let value = this.modifyTeacher.className;
              changeClassName(this.modifyTeacher.id,"userId",value).then(data => {
                //给父组件传值
                this.upLoaing = false
                  this.$emit("classNewName",value);
                  this.$message({
                    message: "修改成功！",
                    type: "success"
                  });
                  this.modifyTeacher.dialogFormVisible = false;
              }).catch(Error =>{
                this.upLoaing = false;
              })
          }
        } else {
          return false;
        }
      });
    },
  }
};
</script>
<style lang="scss" scoped>
section,footer {
  text-align: center;
}
.title {
  text-align: left;
  color: #999;
}
section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
</style>
